import React, { useState } from 'react';
import { Table, Button, Space, Tooltip } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const bossCalledMe = () => {
  // 设置时间范围状态
  const [timeRange, setTimeRange] = useState('past-week'); // 'past-week', 'next-two-weeks', 'next-four-weeks'
  
  // 邮件统计数据对象
  const emailStats = {
    totalEmails: 10,
    daysCount: 2,
    fromManager: 3,
    totalReplied: 6,
    repliedToday: 5
  };
  
  // 过去一周的数据
  const pastWeekData = [
    {
      key: '1',
      id: 1,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '高', type: 'high' },
      replyStatus: { text: '已回复', type: 'replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '直属经理'
    },
    {
      key: '2',
      id: 2,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '高', type: 'high' },
      replyStatus: { text: '已回复', type: 'replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '外部邮件'
    },
    {
      key: '3',
      id: 3,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '高', type: 'high' },
      replyStatus: { text: '已回复', type: 'replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '直属经理'
    },
    {
      key: '4',
      id: 4,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '高', type: 'high' },
      replyStatus: { text: '已回复', type: 'replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '外部邮件'
    },
    {
      key: '5',
      id: 5,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '高', type: 'high' },
      replyStatus: { text: '已回复', type: 'replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '外部邮件'
    },
    {
      key: '6',
      id: 6,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '高', type: 'high' },
      replyStatus: { text: '已回复', type: 'replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '直属经理'
    },
    {
      key: '7',
      id: 7,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '低', type: 'low' },
      replyStatus: { text: '未回复', type: 'not-replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '外部邮件'
    },
    {
      key: '8',
      id: 8,
      sender: 'XXXX',
      sendTime: '8月1日 (四) 11:30',
      subject: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      priority: { text: '低', type: 'low' },
      replyStatus: { text: '未回复', type: 'not-replied' },
      replyTime: '8月1日 (四) 11:30',
      emailType: '外部邮件'
    },
  ];
  
  // 未来两周的数据
  const nextTwoWeeksData = [
    // 可以根据需要补充数据
  ];
  
  // 未来四周的数据
  const nextFourWeeksData = [
    // 可以根据需要补充数据
  ];
  
  // 根据当前选择的时间范围获取数据
  const getDataSource = () => {
    switch(timeRange) {
      case 'next-two-weeks':
        return nextTwoWeeksData;
      case 'next-four-weeks':
        return nextFourWeeksData;
      default:
        return pastWeekData;
    }
  };
  
  // 获取邮件数量
  const getEmailCount = () => {
    if (timeRange === 'past-week') {
      return emailStats.totalEmails;
    } else {
      return getDataSource().length;
    }
  };

  // 表格列定义
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: '5%',
    },
    {
      title: '发件人姓名',
      dataIndex: 'sender',
      key: 'sender',
      width: '10%',
    },
    {
      title: '发送时间',
      dataIndex: 'sendTime',
      key: 'sendTime',
      width: '12%',
    },
    {
      title: '主题',
      dataIndex: 'subject',
      key: 'subject',
      width: '22%',
      ellipsis: {
        showTitle: false,
      },
      render: subject => (
        <Tooltip placement="topLeft" title={subject}>
          <span className="hover-content">{subject}</span>
        </Tooltip>
      ),
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      key: 'priority',
      width: '8%',
      render: (priority) => (
        <span 
          className={`priority-badge ${priority.type === 'high' ? 'priority-high' : 'priority-low'}`}
          onClick={() => console.log('当前优先级:', priority.text)}
        >
          {priority.text}
        </span>
      ),
    },
    {
      title: '回复状态',
      dataIndex: 'replyStatus',
      key: 'replyStatus',
      width: '10%',
      render: (status) => (
        <span 
          className={`reply-status ${status.type === 'replied' ? 'status-replied' : 'status-not-replied'}`}
          onClick={() => console.log('当前回复状态:', status.text)}
        >
          {status.text}
        </span>
      ),
    },
    {
      title: '回复时间',
      dataIndex: 'replyTime',
      key: 'replyTime',
      width: '12%',
    },
    {
      title: '邮件类型',
      dataIndex: 'emailType',
      key: 'emailType',
      width: '10%',
    },
  ];

  // 设置行样式为偶数行浅蓝色背景
  const getRowClassName = (record, index) => {
    return index % 2 === 1 ? 'light-blue-row' : '';
  };

  return (
    <div className="email-container">
      {/* 添加自定义CSS样式 */}
      <style jsx="true">
        {`
          .email-container {
            padding: 20px;
          }
          .light-blue-row {
            background-color: #f0f8ff;
          }
          .ant-table-tbody > tr.light-blue-row:hover > td {
            background-color: #e6f4ff;
          }
          .page-title {
            margin: 0 0 10px 0;
          }
          .email-info {
            margin: 10px 0;
          }
          .description {
            color: #666;
            margin: 5px 0 15px 0;
          }
          .emoji {
            font-size: 16px;
            margin-right: 5px;
          }
          .button-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 15px;
          }
          .email-count {
            color: #1890ff;
            font-size: 18px;
            font-weight: bold;
          }
          .stat-number {
            color: #1890ff;
            font-weight: bold;
          }
          .header-section {
            margin-bottom: 20px;
          }
          .table-container {
            background-color: #fff;
            width: 100%;
          }
          .hover-content {
            cursor: pointer;
          }
          .priority-badge {
            cursor: pointer;
          }
          .reply-status {
            cursor: pointer;
          }
          .priority-high {
            color: #faad14;
          }
          .priority-low {
            color: #1890ff;
          }
          .status-replied {
            color: #52c41a;
          }
          .status-not-replied {
            color: #f5222d;
          }
          .ant-table-container {
            width: 100%;
          }
          .ant-table {
            width: 100%;
          }
          .ant-table-cell {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          /* 确保表格填满宽度 */
          .ant-table-wrapper {
            width: 100%;
          }
        `}
      </style>
      
      {/* 全局样式 */}
      <style global jsx>
        {`
          .ant-tooltip-inner {
            background-color: white;
            color: black;
            border: 1px solid #e8e8e8;
          }
          .ant-tooltip-arrow-content {
            background-color: white;
            border: 1px solid #e8e8e8;
          }
        `}
      </style>
      
      <div className="header-section">
        <h2 className="page-title">老板呼我</h2>
        <p className="email-info">
          您过去<span className="stat-number">{emailStats.daysCount}</span>天收到 <span className="email-count">{emailStats.totalEmails}</span> 封来自老板的邮件
        </p>
        <p className="description">
          其中 <span className="stat-number">{emailStats.fromManager}</span> 封来自直属经理! 回复了 <span className="stat-number">{emailStats.totalReplied}</span> 封(其中<span className="stat-number">{emailStats.repliedToday}</span>封是在当天回的哦<span className="emoji">😊</span>)
        </p>
        
        <div className="button-container">
          <Space>
            <Button 
              type={timeRange === 'past-week' ? 'primary' : 'default'} 
              ghost={timeRange === 'past-week'}
              onClick={() => setTimeRange('past-week')}
            >
              过去一周
            </Button>
            <Button 
              type={timeRange === 'next-two-weeks' ? 'primary' : 'default'} 
              ghost={timeRange === 'next-two-weeks'}
              onClick={() => setTimeRange('next-two-weeks')}
            >
              未来两周
            </Button>
            <Button 
              type={timeRange === 'next-four-weeks' ? 'primary' : 'default'} 
              ghost={timeRange === 'next-four-weeks'}
              onClick={() => setTimeRange('next-four-weeks')}
            >
              未来四周
            </Button>
          </Space>
        </div>
      </div>
      
      <Table 
        dataSource={getDataSource()} 
        columns={columns} 
        pagination={false}
        rowClassName={getRowClassName}
        className="table-container"
        scroll={{ x: true }}
      />
    </div>
  );
};

export default bossCalledMe;